<!DOCTYPE html>
<html lang="en">
<head>
    <title>新增需求</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="refresh" content="1200">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_855021_df13d5353cs.css">
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <link rel="stylesheet" href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_855021_hdj75ul9vw9.css  ">
    <style>
        .left,.right{
            width: 340px;
            height: 360px;
            border:1px solid #ddd;
            float: left;
            overflow-y: auto;
            background-color: #f9f9f9
        }
        .right{
            float: right;
        }
        .left ul,.right ul{
            height: 100%;
        }
        .search-input{
            border: 1px solid #ddd;
            width: 200px;
            float: right;
            width: 340px;
            position:relative;
        }
        .search-input input{
            border: 0;
            outline: none;
            padding-left: 3px;
            width: 95%;
            height: 24px;
        }
        .icon-search{
            position:absolute;
            top: 3px;
            color: #999
        }
        .content{
            padding-top: 0
        }
    </style>
</head>
<body>
<section class="content" id="app" style="width: 750px;margin: 0 auto">
    <div style="height: 30px;">
        <div class="search-input">
            <input type="text" placeholder="关键字"  @keyup.delete="searchKey($event)" @keyup="searchKey($event)"/>
            <i class="iconfont icon-search"></i>
        </div>
    </div>
    <div class="left">
        <ul id="treeLeft" class="ztree"></ul>
    </div>
    <div class="right">
        <ul id="treeRight" class="ztree"></ul>
    </div>
    <div class="south" v-if="isFZR" style="height:50px;line-height:50px;text-align:center;">
        <input type="button" value="保存" class="btn oaBtn btn-sm" />
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript">
    var api = frameElement.api, W = api.opener;
    var thisData={
        currentUser:getCurrentUser(),
        authorityList:{cpLeader:false,kfLeader:false,superLeader:false},
        classificationId:'',
        classificationCreateUser:''	
    }

    var leftSetting = {
        view: {
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            drag: {
                autoExpandTrigger: true,
                prev: dropPrev,
                inner: dropInner,
                next: dropNext
            },
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
			beforeDrop: beforeDrop,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRename: onRename
        }
    };

    var rightSetting = {
        view: {
            selectedMulti: false
        },
        edit: {
            drag: {
                autoExpandTrigger: true,
                prev: dropPrev,
                inner: dropInner,
                next: dropNext
            },
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: false,
            showRenameBtn: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeDrag: beforeDrag,
			beforeDrop: beforeDrop,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            beforeRename: beforeRename,
            onRename: onRename
        }
    };

    var leftNodes =[ ];

    var rightNodes =[ ];
    var rightNodesOld =[ ];
    var log, className = "dark";
    function beforeDrag(treeId, treeNodes,targetNode) {
        
        className = (className === "dark" ? "":"dark");
        for (var i=0,l=treeNodes.length; i<l; i++) {
            if (treeNodes[i].drag === false) {
                curDragNodes = null;
                return false;
            } else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
                curDragNodes = null;
                return false;
            }
        }
        curDragNodes = treeNodes;
        return true;
    }

    $(".btn").on("click",function(){
        parent.refresh();
        api.close();
    })

    $(".search-input input").on("keyup",function(){
        var keyVal = $(this).val();
        rightNodes = [];
        if(keyVal==''){
            rightNodes=rightNodesOld;
        }else{
            rightNodesOld.forEach((element,i) => {
                if(i==0){
                    rightNodes.push(element);
                    return false;
                }
                if(keyVal!='' && element.name.indexOf(keyVal) > -1)
                    rightNodes.push(element);
            });
        }
        
        $.fn.zTree.init($("#treeRight"), rightSetting, rightNodes);
    })

    
    function beforeDrop(treeId, treeNodes, targetNode, moveType) {
        // if(targetNode.level!=1)
        //     return false
        if((treeId=="treeLeft" && targetNode.level==0) || targetNode==null 
        || (treeId=="treeRight" && targetNode.level==0 && moveType=="next")) 
            return false;

        if(treeId=="treeLeft" 
        && ((treeNodes[0].level==2 && targetNode.level==2) || (treeNodes[0].level==2 && targetNode.level==1))
        ){
            $.wyui.postMethod("/projectTrack/updateGroup.json", {
                id:treeNodes[0].id,
                parentId: targetNode.level==1? targetNode.id : targetNode.pId,
                groupName:treeNodes[0].name,
                userId:thisData.currentUser.id
            }, function (data) {
                init();
            });
        }else if(treeId=="treeLeft"){
            $.wyui.postMethod("/projectTrack/addChild.json", {
                mainId:treeNodes[0].id,
                parentId: moveType=="inner"?targetNode.id: targetNode.pId,
                groupName:treeNodes[0].name,
                userId:thisData.currentUser.id
            }, function (data) {
                init();
            });
        }else if(treeId=="treeRight"){
            $.wyui.postMethod("/projectTrack/delItem.json", {
                id:treeNodes[0].id
            }, function (data) {
                init();
            });
        }
        return targetNode ? targetNode.drop !== false : true;
    }
    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeLeft");
        zTree.selectNode(treeNode);
        zTree.editName(treeNode);
        return false;
    }
    function beforeRemove(treeId, treeNode) {
        className = (className === "dark" ? "":"dark");
        showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeLeft");
        zTree.selectNode(treeNode);
        if(confirm("确认删除 节点 -- " + treeNode.name + " 吗？")){
            $.wyui.postMethod("/projectTrack/delItem.json", {
                id:treeNode.id
            }, function (data) {
                init();
            });
            return true;
        }else
            return false;
    }

    function dropPrev(treeId, nodes, targetNode) {
        var pNode = targetNode.getParentNode();
        if (pNode && pNode.dropInner === false) {
            return false;
        } else {
            for (var i=0,l=curDragNodes.length; i<l; i++) {
                var curPNode = curDragNodes[i].getParentNode();
                if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
                    return false;
                }
            }
        }
        return true;
    }
    function dropInner(treeId, nodes, targetNode) {
        if (targetNode && targetNode.dropInner === false) {
            return false;
        } else {
            for (var i=0,l=curDragNodes.length; i<l; i++) {
                if (!targetNode && curDragNodes[i].dropRoot === false) {
                    return false;
                } else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
                    return false;
                }
            }
        }
        return true;
    }
    function dropNext(treeId, nodes, targetNode) {
        var pNode = targetNode.getParentNode();
        if (pNode && pNode.dropInner === false) {
            return false;
        } else {
            for (var i=0,l=curDragNodes.length; i<l; i++) {
                var curPNode = curDragNodes[i].getParentNode();
                if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
                    return false;
                }
            }
        }
        return true;
    }

    
    function beforeRename(treeId, treeNode, newName, isCancel) {
        className = (className === "dark" ? "":"dark");
        showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
        if (newName.length == 0) {
            setTimeout(function() {
                var zTree = $.fn.zTree.getZTreeObj("treeLeft");
                zTree.cancelEditName();
                alert("节点名称不能为空.");
            }, 0);
            return false;
        }else{
            $.wyui.postMethod("/projectTrack/updateGroup.json", {
                id:treeNode.id,
                parentId: treeNode.pId,
                groupName:newName,
                userId:thisData.currentUser.id
            }, function (data) {
                
            });
        }
        return true;
    }
    function onRename(e, treeId, treeNode, isCancel) {
        showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
    }
    function showRemoveBtn(treeId, treeNode) {
        return treeNode.level==1|| treeNode.level==2?true:false;
    }
    function showRenameBtn(treeId, treeNode) {
        return treeNode.level==1?true:false;
    }
    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='"+className+"'>"+str+"</li>");
        if(log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }
    function getTime() {
        var now= new Date(),
        h=now.getHours(),
        m=now.getMinutes(),
        s=now.getSeconds(),
        ms=now.getMilliseconds();
        return (h+":"+m+":"+s+ " " +ms);
    }

    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("treeLeft");
            zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
            return false;
        });
    };
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
    function selectAll() {
        var zTree = $.fn.zTree.getZTreeObj("treeLeft");
        zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
    }

    function addGroup() {
        $.wyui.postMethod("/projectTrack/addGroup.json", {
            parentId: 0,
            groupName:'新建分组',
            userId:thisData.currentUser.id,
            classificationId:thisData.classificationId
        }, function (data) {
            // { id:1, pId:0, name:"父节点 1", open:true,},
            
            var obj =new Object();
            obj.id = data.ID;
            obj.pId = 0;
            obj.open = true;
            obj.name = data.GROUP_NAME;
            leftNodes.push(obj);
            init();
        });
    }


    function init(){
        thisData.classificationId = $.wyui.page.urlParams.classificationId;
        thisData.classificationCreateUser = $.wyui.page.urlParams.classificationCreateUser;
        $.wyui.postMethod(urlConfig.system.rightOp.getRightOpByUserId, {userId: thisData.currentUser.id}, function (data) {
            for (var i = 0; i < data.length; i++) {
                thisData.authorityList[data[i].eName] = true;
            }
        },true);

        $.wyui.postMethod("/projectTrack/getGroupByUserId.json", {
            userId: thisData.currentUser.id,
            authorityList: thisData.authorityList,
            classificationId: thisData.classificationId,
            classificationCreateUser: thisData.classificationCreateUser
        }, function (data) {
            leftNodes =[
                { id:0, pId:-1, name:"自定义分组", open:true,dropInner:false,drag:false},
            ];

            rightNodes =[
                { id:1, pId:0, name:"需求列表", open:true,drag:false},
            ];

            data.leftList.forEach((element,index) => {
                var obj =new Object();
                obj.pId = element.parentId;
                obj.id= element.id;
                obj.pId=element.parentId;
                obj.name=element.groupName;
                if(element.parentId=="0"){
                    obj.open = true;
                    obj.drag = false;
                }else
                    obj.dropInner = false;
                leftNodes.push(obj);
            });
            
            data.rightList.forEach((element,index) => {
                var obj =new Object();
                obj.id= element.id;
                obj.pId=1;
                obj.name=element.name;
                obj.dropInner = false;
                rightNodes.push(obj);
            });
            rightNodesOld = rightNodes;
            initTree();
          
        });
    }

    function initTree(){
        setTimeout(function(){
            $.fn.zTree.init($("#treeLeft"), leftSetting, leftNodes);
            $.fn.zTree.init($("#treeRight"), rightSetting, rightNodes);

            var sObj = $("#treeLeft_1_span");
            var addStr = "<span class='button add' id='addBtn_1' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_1");
            if (btn) btn.bind("click", function(){
                addGroup();
                return false;
            });

        },300);
    }
    
    $(document).ready(function(){
        init();
        initTree();
        $("#selectAll").bind("click", selectAll);
    });
</script>
</body>
</html>